<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 行内块元素之间的缝隙解决方案 */

        .filter-box dd {
            /* 第二种  父元素设置font-size:0; 但需要重新设置子元素的font-size*/
            /* font-size: 0; */

            /* 第四钟 父元素word-spacing(词边距为负)*/
            /* word-spacing: -5px; */
        }

        .filter-box a {
            display: inline-block;
            width: 60px;
            height: 40px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 40px;

            /* 第一种 :margin-left 为负值*/
            /* margin-right: -5px; */

            /* 第二种 补充*/
            /* font-size: 14px; */
            /* 第三章 设置浮动 */
            /* float: left; */
        }

        /* 第五种：html结构中删掉回车和标签之间的空格 */
    </style>
</head>

<body>

    <!-- 筛选 -->
    <div class="filter-box">
        <dl>
            <dt> 空间</dt>
            <dd>
                <a href="#">全部</a><a href="#">客厅</a><a href="#">卧室</a>
                <a href="#">厨房</a>
                <a href="#">卫生间</a>
                <a href="#">餐厅</a>
            </dd>
        </dl>

        <!-- <table>
            <tr>
                <td></td>
            </tr>
        </table> -->
    </div>

</body>

</html>